<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="disabled">
      <a-form-model layout="horizontal" ref="subForm" slot="detail" :model="model" :rules="validatorRules" v-bind="formItemLayout">
        <z-form-item :datas="fieldArr" :form="model" :rules="validatorRules" :gutter="0" @change="onChange" @rows="onRows">
          <!--//自定义变更社区戒毒/康复执行地关系人情况-->
          <template slot="slots-contactsList"> 
            <a-space v-for="(item, index) in model.contactsList" :key="index">
              <a-input v-model="item.contactsName" placeholder="姓名" />
              <a-select v-model="item.contactsRelationship" :options="options" placeholder="亲属关系" style="min-width:110px;"/>

                <a-input v-model="item.contactsPhone" placeholder="联系电话" @blur="contactsPhone($event)" />



              <a-input v-model="item.contactsUnit" placeholder="就业单位" />
              <a-tooltip title="点击可移除该项">
                <a-icon v-if="model.contactsList.length > 1" type="minus-circle-o" @click="minusJoin(item)" />
              </a-tooltip>
            </a-space>
            <a-button @click="plusJoin"> + 添加家属信息 </a-button>
            <span style="color:red;margin-left: 105px;" v-if="flag.length != 0 && clickflag">未输入或手机号不正确!</span>
          </template>
        </z-form-item>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { changePlaceApply } from '@/api/sjsk/personService'
  export default {
    props: {
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        flag:[],
        clickflag:false,
        model: {},
        confirmLoading: false,
        formItemLayout: {
          labelCol: { span: 6 },
          wrapperCol: { span: 16 }
        },
        options: [
          { title: '夫妻', key: '1' },
          { title: '父子', key: '2' },
          { title: '父女', key: '3' },
          { title: '母子', key: '4' },
          { title: '母女', key: '5' },
          { title: '儿子', key: '6' },
          { title: '女儿', key: '7' },
          { title: '兄弟', key: '8' },
          { title: '兄妹', key: '9' },
          { title: '姐弟', key: '10' },
          { title: '姐妹', key: '11' },
          { title: '其他', key: '12' },
        ],
        fieldArr: [
          {label: '姓名', prop: 'sjskPersonName', tagType: 'input', disabled: true},
          {label: '性别', prop: 'sex', tagType: 'dict-select', dictCode:'sex', disabled: true},
          {label: '出生日期', prop: 'birthday', tagType: 'date-picker', format: 'YYYY-MM-DD', showTime:false, disabled: true},
          {label: '身份证号', prop: 'identityCard', tagType: 'input', disabled: true},
          {label: '手机号码', prop: 'phone', tagType: 'input', disabled: true},
          {label: '户籍地详址', prop: 'householdAddress', tagType: 'input', disabled: true},
          {label: '现社区戒毒/康复执行地', prop: 'currentTown', tagType: 'linkage-area', disabled: true},
          {label: '申请变更社区戒毒/康复执行地', prop: 'levels', tagType: 'linkage-area'},
          {label: '社区戒毒/康复执行日期', prop: 'sjskExecutionDate', tagType: 'input', disabled: true},
          {label: '变更社区戒毒/康复执行地后实际居住地详址', prop: 'nowExecutionAddress', tagType: 'input'},
          {label: '变更原因', prop: 'changeReason', tagType: 'input'},
          {label: '证明材料', prop: 'file', tagType: 'upload-file', fileDescribe: '户籍地、居住地变更情况证明材料；', fileFormat: '.doc,.docx,.xls,.xlsx,.pdf,.jpg,.jpeg,.png'},
          {label: '变更社区戒毒/康复执行地关系人情况', prop: 'contactsList'},
        ],
        validatorRules: {
          levels:[ { required: true, type: 'array', message: '请选择!' }],
          nowExecutionAddress:[ { required: true, message: '请输入!' }],
          changeReason:[ { required: true, message: '请输入!' }],
          file:[ { required: true, message: '请上传!' }],
          contactsList:[ { required: true,  type: 'array',  message: '请输入!' },],
        },
      }
    },
    methods: {
      contactsPhone(e){
        let a = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
        if(a.test(e.target.value)){
          e.target.style.border = '1px solid #ccc'
          this.flag.shift()
          if(this.flag.length != 0 ){this.clickflag = true}
          else{this.clickflag = false}
        }
        else{
          this.flag.push('flag')
          this.clickflag = true
          e.target.style.border = '1px solid #FF0000'
        }
      },
      show (record) {
        console.log("record")
        console.log(record)
        // this.model = record?Object.assign({}, record):this.model;
        this.$set( this.model, 'sjskPersonId', record.id )
        this.$set( this.model, 'sjskPersonName', record.realName )
        this.$set( this.model, 'sex', record.sex )
        this.$set( this.model, 'birthday', record.birthday )
        this.$set( this.model, 'identityCard', record.identityCard )
        this.$set( this.model, 'phone', record.phone )
        this.$set( this.model, 'householdAddress', record.householdAddress)
        this.$set( this.model, 'sjskExecutionDate', record.sjskStartDate + '~' + record.sjskEndDate )
        // 现社区戒毒/康复执行地字符串（回填）
        let levels = Object.keys(record).length>0 && record.level? record.level.split(','): []
        this.$set(this.model, 'currentTown', levels)
      },
      submitForm () {
        const parameter = Object.assign({}, this.model)
        this.$refs.subForm.validate((valid)=> {
          if (valid) {
            if(this.flag.length == 0 ){
              this.confirmLoading = true
            changePlaceApply(parameter)
              .then(res => {
                this.confirmLoading = false
                if (res.success) {
                  this.$message.success(res.message)
                  this.$emit('ok');
                } else {
                  this.$message.warn(res.message)
                }
              })
              .catch(e => {
                this.$message.warn('请求失败！')
                this.confirmLoading = false
              })
          }  
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      onChange(prop, value) {
        if(prop==='levels') {
          let lastData = value.length>0?value[value.length-1]:''
          this.$set(this.model,'level', value.toString())
          this.$set(this.model,'departmentId', lastData)
        }
      },
      onRows(prop, labels) {
        if(prop==='levels') {
          let label = labels? labels.map(v=>v.title): ''
          this.$set(this.model,'nowExecutionArea', label.toString())
        }
      },
      // 添加家属信息
      plusJoin() {
        let length = 0
        if(Object.keys(this.model).length>0 && this.model['contactsList']) {
          length = this.model['contactsList'].length
        } else {
          this.$set(this.model,'contactsList', [])
        }
        this.$set(this.model['contactsList'], length, {})
      },
      // 移除家属信息
      minusJoin(item) {
        let index = this.model['contactsList'].indexOf(item);
        if (index !== -1) {
          this.model['contactsList'].splice(index, 1);
        }
      },
    }
  }
</script>
<style lang="less" scoped>

</style>